<template>
    <div class="container">
        <el-table :data="tableData" height="calc(100vh - 426px)">
            <el-table-column prop="title" label="触发用户" width="180">
                <template #default="{ row }">
                    <div class="avatar">
                        <el-image v-if="row.contactUser?.avatar" :src="row.contactUser.avatar" />
                        <img class="el-image" v-else src="@renderer/assets/img/user.png" >
                        <renderOverflowTootip :value="row.contactUser?.name || '用户已退群'" :row="1" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="props.replyType === 'groupChat'" prop="chatInfo" label="群聊" width="160">
                <template #default="{ row }">
                    <div class="avatar">
                        <div class="avatar-img">
                            <ZWGroupAvatar v-if="Array.isArray(row?.chatInfo?.avatars) && row.chatInfo.avatars.length" :avatars="row.chatInfo.avatars" />
                            <img class="el-image" v-else src="@renderer/assets/img/group_avatar.png" >
                        </div>
                        <renderOverflowTootip :value="row.chatInfo?.name || '此群已解散'" :row="1" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="触发时间" width="180">
                <template #default="{ row }">
                    <renderOverflowTootip :value="row.time" />
                </template>
            </el-table-column>
            <el-table-column prop="keyword" label="触发关键词" width="170">
                <template #default="{ row }">
                    <renderOverflowTootip isTags :value="row.keyword" effect="light" />
                </template>
            </el-table-column>
            <el-table-column prop="isReply" label="是否回复">
                <template #default="{ row }">
                    {{ row.isReply ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="replyContent" label="回复内容" width="160">
                <template #default="{ row }">
                    <replyContent :row="row" :reply-type="props.replyType" />
                </template>
            </el-table-column>
            <el-table-column prop="unReplyMsg" label="未回复原因" min-width="140">
                <template #default="{ row }">
                    <renderOverflowTootip :value="row.unReplyMsg || '--'" />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="state.page" v-model:pageSize="state.page_size" background
            layout="total, prev, pager, next, sizes, jumper" :total="state.total" :page-sizes="[15, 30, 50, 100]"
            @sizeChange="onSizeChange" @currentChange="onCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";

import ZWGroupAvatar from '@renderer/components/win/ZWSelectGroup/ZWGroupAvatar.vue'
import {
    getSmartReplySingleRecordList,
    getSmartReplyChatRecordList
} from '@renderer/ajax/api/smartReply'


import renderOverflowTootip from "../tableColumnRender/render-overflow-tootip.vue";
import replyContent from "./replyContent.vue";

const emit = defineEmits(["submit", "reset", "update:loading"]);
const props = defineProps({
    replyType: {
        type: String,
    },
    fetchParams: {
        type: Object,
        default: () => ({})
    }

});
/* ----------------------------搜索参数-start---------------------------- */
const state = reactive({
    id: 0, // 规则iD
    keyword: '', // 用户名称
    time: [], // 触发时间
    page: 1,
    page_size: 15,
    total: 0,
});

const onSizeChange = (v: number) => {
    state.page_size = v;
    getData();
};
const onCurrentChange = (v: number) => {
    state.page = v;
    getData();
};
/* ----------------------------搜索参数-end---------------------------- */

/* ----------------------------表格内容-start---------------------------- */

const tableData = reactive([]);

const getData = async () => {
    try {
        emit('update:loading', true)
        const getListApi = props.replyType === 'privateChat' ? getSmartReplySingleRecordList : getSmartReplyChatRecordList
        const res = await getListApi(state)
        tableData.length = 0
        tableData.push(...(res?.data || []))
        state.total = res?.total || 0;
    } finally {
        emit('update:loading', false)
    }
};

watch(
    () => props.fetchParams,
    () => {
        Object.assign(state, {
            ...props.fetchParams,
            page: 1,
            page_size: 15,
            total: 0
        })
        getData()
    },
    { deep: true }
)


/* ----------------------------表格内容-end---------------------------- */

/**
 * 打开明细弹窗
 */
const handleShowDetail = (row) => { };

defineExpose({
    refresh: getData
})
</script>
<style lang="scss" scoped>
.el-button.is-link {
    padding: 0;
}

.header-icon {
    .header-label {
        display: inline-block;
        vertical-align: middle;
    }

    .el-icon {
        margin-left: 2px;
        vertical-align: middle;
    }
}

.avatar {
    display: flex;
    align-items: center;
    gap: 8px;
    .avatar-img {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        .el-image {
            border-radius: 4px;
        }
    }
    .el-image {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
    }

    .user-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

</style>
